<template>
	<view>
		<!-- 主体表单 -->
		<view class="main1">
			<view class="title_des">欢迎使用大健康</view>
			<view class="item">
				<u-icon name="phone-fill" color="#171717" size="18"></u-icon>
				<u--input v-model="loginInfo.name" class="main-input" placeholder="请输入账号" />
			</view>
			<view style="margin-top: 8px"></view>
			<view class="item">
				<u-icon name="eye-fill" color="#171717" size="18"></u-icon>
				<u--input
				    class="main-input" type="password" placeholder="请输入密码"
				    border="surround"
				    v-model="loginInfo.pwd"
					clearable
				  ></u--input>
				 
			</view>
			<view class="item">
				<u-icon name="photo-fill" color="#171717" size="18"></u-icon>
				<u--input
				    class="main-input"  placeholder="请输入验证码"
				    border="surround"
				    v-model="loginInfo.code"
					clearable
				  ></u--input>
				   <jp-verification-literalness  @getCode="getCode" :lineLength="4" :contentWidth="60" :contentHeight="30" :securityCode="securityCode"></jp-verification-literalness>
			</view>
		</view>
		<view class="btn_login" @click="startLogin">登录</view>
		<!-- 底部信息 -->
		<view class="footer" style="margin-top: 16px">
			<view>
				<navigator url="/pages/my/register/select" open-type="navigate">新用户注册</navigator>
			</view>
			<view style="margin-left: 32%;">
				<navigator url="/pages/my/forget/person" open-type="navigate">忘记密码</navigator>
			</view>
		</view>
		<view class="weixinLogin">
			<view style="border: 1rpx inset;width:30%;float: left;margin-top: 2%;margin-left: 3%;border-color: #F8F8F8;"></view>
			第三方账号登录
			<view style="border: 1rpx inset;width:30%;float: right;margin-top: 2%;margin-right: 3%;border-color: #F8F8F8;"></view>
		</view>
		<!-- 其他登录 -->
		<view class="other_login cuIcon">
			<view class="login_icon_wx">
				<image style="width: 50px;height: 50px;" src="@/static/WeChatcopy.png" @click="login_weixin"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {dcLogin,captchaImage} from '@/common/api/index.js'
	export default {
		data() {
			return {
				loginInfo:{
					name: '18596742365', //用户/电话
					pwd: '123456', //密码
					code:"",
					uuid:""
				},
				securityCode:""
			};
		},
		mounted() {
			this.getCode()
		},
		destroyed() {
			
		},
		methods: {
			//获取验证吗
			async getCode(){
				let res = await captchaImage()
				// console.log(res)
				this.loginInfo.uuid = res.uuid
				this.securityCode = res.captcha
			},
			navBack() {
				uni.navigateBack();
			},
			async toLogin() {
				let res = await dcLogin(this.loginInfo)
				// console.log(res)
				if(res.code!=200)return uni.$u.toast(res.msg);
				 uni.setStorageSync('token',res.data.token)
				 uni.setStorageSync('doctorInfo',JSON.stringify(res.data));
				uni.switchTab({
					url:'/pages/message/message'
				})
			},
			getUserInfo() {
				
			},
			startLogin() {
				if (!this.loginInfo.name) {
					uni.$u.toast('请输入账号')
					return;
				}
				if (!this.loginInfo.pwd) {
					uni.$u.toast('请输入密码');
					return;
				}
				uni.showLoading({
					title: "登录中"
				});
				uni.$u.debounce(this.toLogin, 500)
			},
			login_weixin() {
				//用于退出登录回来不会再调一次授权登录
				uni.$u.toast('暂未开通微信登录');
			}
		}
	};
</script>

<style>
	.type {
		display: flex;
		margin-left: 16px;
		border-bottom: 1px solid #eeeeee;
		width: 100%;
	}

	.title_des {
		font-weight: bold;
		color: #0055b8;
		font-size: 22px;
		margin-bottom: 32px;
	}

	.login_icon_wx {
		color: #999999;
		border: none;
	}

	.weixinLogin {
		color: #999999;
		text-align: center;
		font-size: 12px;
		margin-top: 60px;
		left: auto;
		right: auto;
	}

	.footer_des {
		color: #666666;
		text-align: center;
		font-size: 14px;
		margin-top: 40px;
	}

	.getCode {
		font-size: 14px;
		margin-left: 40px;
		color: #0055b8;
	}

	.item {
		line-height: 40px;
		display: flex;
	}

	.login_image {
		margin-top: 8px;
		width: 20px;
		height: 25px;
	}

	.main-input {
		font-size: 14px;
		margin-left: 16px;
		border-bottom: 1px solid #eeeeee;
		height: 40px;
		line-height: 40px;
	}

	.main-input-code {
		width: 70%;
		font-size: 14px;
		height: 40px;
		line-height: 40px;
	}

	.btn_login {
		color: #ffffff;
		font-size: 16px;
		width: 260px;
		height: 40px;
		background: #0055b8;
		border-radius: 8px;
		line-height: 40px;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		margin-top: 45px;
	}

	.main-input {
		flex: 1;
		text-align: left;
		font-size: 28 upx;
		padding-right: 10 upx;
		margin-left: 20 upx;
	}
	
	.content {
		display: flex;
		flex-direction: column;
		justify-content:center;
		/* margin-top: 128upx; */
	}
	
	/* 头部 logo */
	.header {
		width:161upx;
		height:161upx;
		box-shadow:0upx 0upx 60upx 0upx rgba(0,0,0,0.1);
		border-radius:50%;
		background-color: #000000;
		margin-top: 128upx;
		margin-bottom: 72upx;
		margin-left: auto;
		margin-right: auto;
	}
	.header image{
		width:161upx;
		height:161upx;
		border-radius:50%;
	}
	/* 主体 */
	.main1 {
		display: flex;
		flex-direction: column;
		padding-top: 200upx;
		padding-left: 70upx;
		padding-right: 70upx;
	}
	/* 主体 */
	.main {
		display: flex;
		flex-direction: column;
		padding-top: 32upx;
		padding-left: 70upx;
		padding-right: 70upx;
	}
	.tips {
		color: #999999;
		font-size: 28upx;
		margin-top: 64upx;
		margin-left: 48upx;
	}
	
	/* 其他登录方式 */
	.other_login{
		z-index: 88;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin-top: 60upx;
		text-align: center;
	}
	.login_icon{
		border: none;
		font-size: 64upx;
		margin: 0 64upx 0 64upx;
		color: rgba(0,0,0,0.7)
	}
	.wechat_color{
		color: #83DC42;
	}
	.weibo_color{
		color: #F9221D;
	}
	.github_color{
		color: #24292E;
	}
	
	/* 底部 */
	.footer{
		text-align: center;
		display: flex;
		flex-direction: row;
		justify-content: center;
		font-size: 14px;
		color: #0055b8;
		height:20px;
		line-height: 20px;
	}
	/* 底部 */
	.register_footer{
		margin-left: 74upx;
		width: 80%;
		margin-top: 32upx;
		position: absolute;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-size: 28upx;
		color: rgba(0,0,0,0.7);
		text-align: center;
		height: 40upx;
		line-height: 40upx;
	}
	.back-btn {
		position: absolute;
		left: 40upx;
		z-index: 9999;
		padding-top: var(--status-bar-height);
		top: 60upx;
		font-size: 40upx;
		color: #000000;
	}
	.footer text{
		font-size: 24upx;
		margin-left: 15upx;
		margin-right: 15upx;
	}
	.my_top{
		margin-bottom: 12upx;
		width: 100%;
		height: 200upx;
		background:#97582B;
	}
	
</style>
